<template>
  <div id="app">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="img in imgs" :key="img.id">
              <img :src="img.img" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper" 
import axios from 'axios';
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);

export default {
  name: 'Carousel',
  data(){
    return {
      imgs : []
    }
  },
  created(){
    axios({
        url:"/books",
    }).then(res=>{
      // console.log(res.data)
      this.imgs = res.data
      this.$nextTick(()=>{
        new Swiper ('.swiper-container', {
          loop: true, // 循环模式选项
          autoplay:true,
          effect : 'fade',//淡出淡如
          fadeEffect: {
            crossFade: true,
          },
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            // el: '.swiper-scrollbar',
          },
        })  
      })
    }).catch(res=>{
        if(res){
            Toast.fail('网络连接错误');
        }
    })
  },
  mounted(){
    
  },
}
</script>

<style scoped>
@import url(../../assets/css/Swiper4.5.1.css);

.swiper-container {
    width: 100%;
    height: 100%;
    font-size: 0.1rem;
    background-size: contain;
} 
img{
  width: 100%;
  height: 1.6rem;
}
#app{
  margin-left: 50%;
  transform: translate(-50%,0);
  width: 80%;
  height: 2rem;
  border-radius: 0.1rem;
}
</style>
